<template>
	<!-- 投票结果 -->
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center talk_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub talk_fd0_0'>
					<view class='flex flex-wrap align-center talk_fd0_0_c0'>
						<text class='fu-iconfont2  talk_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='talk_fd0_0_c1_c0'>投票 </text>
					</view>
					<view class='flex flex-wrap align-center justify-end talk_fd0_0_c0'>
					</view>
				</view>
			</view>  

			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="gesture-container" v-if="type==1">
				<view class="change-outer">
					<view class="top-outer">
						<image style="width: 492rpx;height: 310rpx" src="@/static/sign/11.png" mode="">
						</image>
						<view class="result">投票成功</view>
						<text class="hui">发布时间：{{info.create_time}}</text>
						<text class="hui">结束时间：{{info.end_time}}</text>
					</view>
					<view class="name">
						{{info.vote_title}}
					</view>
					<view class="select-item" v-for="item in info.options">
						<view class="item-name">
							{{item.value}} <text :style="{color: info.vote_option === item.id ? '#145EFD' : '' }"
								class="num">{{item.num}}票</text>
						</view>
						<view
							style="display: flex; align-items: center; justify-content: space-between;margin-top: 16rpx;">
							<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
								<view :class="item.is_choice ? 'MyPortrayal_progress1_fd2_other' : ''"
									class='benben-progress-bar-center MyPortrayal_progress1_fd2'
									:style="{width:getBili(item.num)+'%'}">
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="flex flex-direction flex-wrap align-center justify-center benben-flex-layout erro" v-if="type==2">
			    <image class='qdjg_fd1_0_ibhf' mode="aspectFit" :src='STATIC_URL+"stcimg/12.png"'></image>
			    <!-- <text class='qdjg_fd1_1_ibhf'>抢答失败</text> -->
			    <text class='qdjg_fd1_1_ibhf'>投票已结束，下次要快一点哦！</text>
				<text class="hui">发布时间：{{time}}</text>
				<text class="hui">结束时间：{{time1}}</text>
			    <view class='flex flex-direction flex-wrap align-center justify-center qdjg_fd1_3_ibhf' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
			        <text class='qdjg_fd1_3_c0_ibhf'>返回</text>
			    </view>
			</view>

			<!-- <view class="flex benben-position-layout flex flex-wrap align-center classhourPar_flex_6"
				:style="{height:(148+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
				<button class='classhourPar_fd6_0' @click.stop="goNext">返回课程</button>
			</view>
			<view :style="{height: (148+bottomSafeAreaRpx)+'rpx'}"></view> -->
		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		data() {
			return {
				aid: "",
				info: {},
				total_num: "",
				type:1,
				time:'',
				time1:''
			}
		},
		// 小程序页面生命周期，如果是 uni-app 可以写
		onLoad(options) {
			this.aid = options.aid
			console.log(options)
			this.time = options.time
			this.time1 = options.time1
			this.type = options.type
			if(this.type==1){
				this.getInfo()
			}
			
		},
		computed: {
			// 计算属性
		},
		watch: {
			// 监听器
		},
		methods: {
			goNext(val) {
				uni.navigateBack({
					delta: 1
				})
			},
			getBili(val) {
				return parseFloat((val / this.total_num * 100).toFixed(1));
			},
			async getInfo() {
				let res = await this.$api.post(global.apiUrls.post68b690e4164c7, {
					activitieslog_id: this.aid,
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.info = res.data.data.list
				this.total_num = res.data.data.total_num
			}
		},

		onReady() {},
		onShow() {

		},
		onHide() {},
		onUnload() {},
	}
</script>
<style lang="scss" scoped>
	.yuan {
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 2rpx solid #E4E4E8;
		border-radius: 40rpx;
	}

	.MyPortrayal_fd1_7_c1_c0_c1_c0 {
		background: #EEF1F9;
		width: 100%;
		height: 20rpx;
		border-radius: 14rpx;
		background-size: 100% auto;

		.MyPortrayal_progress1_fd2 {
			background: linear-gradient(90deg, #1D54F7 0%, #17A4FC 100%);
			border-radius: 14rpx;
			opacity: 0.3;
		}

		.MyPortrayal_progress1_fd2_other {
			opacity: 1;
			background: linear-gradient(90deg, #1D54F7 0%, #17A4FC 100%);
		}


	}

	.classhourPar_flex_6 {
		width: 750rpx;
		height: 148rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;
	}

	.classhourPar_fd6_0 {
		width: 100%;
		width: 702rpx;
		height: 84rpx;
		background: #145EFD;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		color: #fff;
		font-weight: 500;
		font-size: 36rpx;
		margin: 32rpx auto;
	}

	.gesture-container {

		.change-outer {
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 56rpx 24rpx 32rpx;
			margin: 24rpx 24rpx 0;

			.top-outer {
				padding-bottom: 44rpx;
				border-bottom: 1rpx solid #EEEEEE;
				flex-direction: column;
				display: flex;
				align-items: center;

				.result {
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					margin-top: 30rpx;
					margin-bottom: 28rpx;
				}

				.time {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-top: 16rpx;
				}
			}

			.name {
				font-weight: 500;
				font-size: 36rpx;
				color: #090909;
				margin-top: 44rpx;
			}
		}

		.select-item {
			margin: 52rpx 0;

			.item-name {
				font-weight: 400;
				font-size: 32rpx;
				color: #090909;
				line-height: 46rpx;

				.num {
					float: right;
					font-weight: 400;
					font-size: 26rpx;
					color: #9398A8;
				}
			}
		}

	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #ffffff;
		background-size: 100% auto;
	}

	.talk_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.talk_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.talk_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.talk_fd0_0_c0 {
		width: 120rpx;
	}

	.talk_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
	.hui{
		color: #666666;
		margin-bottom: 16rpx;
	}
	.erro{
		.qdjg_fd1_0_ibhf {
		    width: 492rpx;
		    height: 310rpx;
		    border-radius: 0rpx;
		    margin: 283rpx 0rpx 30rpx 0rpx;
		}
		.qdjg_fd1_1_ibhf {
			margin-bottom: 28rpx;
		    font-size: 32rpx;
		    color: rgba(51, 51, 51, 1);
		}
		.qdjg_fd1_3_ibhf {
		    border: 2rpx solid #145EFD;
		    width: 304rpx;
		    height: 84rpx;
		    border-radius: 8rpx;
			margin-top: 78rpx;
		    .qdjg_fd1_3_c0_ibhf {
		        font-size: 36rpx;
		        color: rgba(20, 94, 253, 1);
		    }
		}
	}
</style>